<template>
    <div class="foot">
            <div class="left">
                <dl>
                    <dt>网站首页</dt>
                    <dd><a href="">用心成就未来</a></dd>
                    <dd><a href="">我们的项目</a></dd>
                    <dd><a href="">企业文化</a></dd>
                    <dd><a href="">合作伙伴</a></dd>
                </dl>
                <dl>
                    <dt>公司业务</dt>
                    <dd><a href="">产品理念</a></dd>
                    <dd><a href="">主要项目</a></dd>
                </dl>
                <dl>
                    <dt>企业文化</dt>
                    <dd><a href="">管理理念</a></dd>
                    <dd><a href="">价值观的体现</a></dd>
                    <dd><a href="">产品理念</a></dd>
                </dl>
                <dl>
                    <dt>关于我们</dt>
                    <dd><a href="">公司简介</a></dd>
                    <dd><a href="">领军人物</a></dd>
                    <dd><a href="">我们的团队</a></dd>
                    <dd><a href="">办公环境</a></dd>
                    <dd><a href="">员工团建</a></dd>
                </dl>
                <dl>
                    <dt>加入我们</dt>
                    <dd><a href="">团队简介</a></dd>
                    <dd><a href="">招聘岗位</a></dd>
                    <dd><a href="">联系我们</a></dd>
                </dl>
            </div>
            <div class="mid">
                <img src="../assets/ewm.png" alt="">
                <p>了解公司更多动态</p>
            </div>
            <div class="right">
                <p class="phone">联系电话：010-57019261</p>
                <div class="address">
                    <p class="text">公司地址：</p>
                    <p>
                        北京市昌平区回龙观东大街318号首开广场307室
                    </p>
                </div>
            </div>
            <div class="bottom">
                版权所有2018© 北京猿马网络技术有限公司
            </div>
    </div>
</template>
<script>
export default {
    name:'Foot'
}
</script>

<style scoped>

.foot {
    height: 250px;
    display: flex;
    flex-wrap: wrap;
    background-color: #1B2337;
    color: #fff;
    padding-top: 50px;
   
}


.left {
    width: 50%;
    display: flex;
    justify-content: space-around;
}

dt {
    font-size: 16px;
}

dd {
    padding-top: 10px;
}

a {
    font-size: 12px;
    color: #7C8394;
}

a:hover {
    color: #ff0;
}

.mid {
    width: 20%;
    height: 75%;
    border: 1px solid #7C8394;
    border-bottom: none;
    border-top: none;
    font-size: 16px;
    color: #7C8394;
    text-align: center;
}

.mid img {
    width: 50%;
}

.right {
    width: 29%;
}

.phone {
    display: flex;
    align-items: center;
    padding: 28px 0 28px 24px;
    line-height: 16px;
    color: #FFF;
}

.phone:before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 0 10px 0 0;
    background: url(../assets/home_bottom.png) no-repeat -40px -40px/360px 260px;
}

.address {
    display: flex;
    align-items: center;
    padding: 0 0 0 24px;
}

.address:before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../assets/home_bottom.png) no-repeat -164px -40px/360px 260px;
    margin: 0 10px 0 0;
}

.text {
    width: 23%;
}

.bottom {
    width: 100%;
    line-height: 40px;
    font-size: 14px;
    color: #7C8394;
    text-align: center;
    background-color: #0F182F;
}
</style>

